<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/assets/layui-v2.5.5/css/layui.css" media="all" />
</head>
<body>
<br/>
<form class="layui-form" action="">
<div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">角色名称：</label>
    	<div class="layui-input-block">
    		<input type="text" name="roleName"  placeholder="请输入角色名称" autocomplete="off" class="layui-input"/>
    	</div>
    </div>
     <div class="layui-inline">
     &nbsp;&nbsp;<button type="button" class="layui-btn" onclick="searchTable();" >查询</button>
     &nbsp;&nbsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>
</form>
<table class="layui-hide" id="test" lay-filter="test" ></table>
<script type="text/html" id="toolbarDemo">
#for(x : powers)
	#if(x.pointcode == 'add')
		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
	#end
#end
</script>
<script type="text/html" id="barDemo">
#for(x : powers)
	#if(x.pointcode == 'edit')
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	#else if(x.pointcode == 'del')
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	#else if(x.pointcode == 'powerweb')
		<a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="powerweb">后台授权</a>
	#end
#end
</script>
                        
<script src="/assets/layui-v2.5.5/layui.js" charset="utf-8"></script> 
<script>
var $,table,mydata;
layui.use(['table','jquery'], function(){
	table = layui.table;
	$ = layui.$;
	//查询table
	searchTable();
	  //监听头工具栏事件
	  table.on('toolbar(test)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	    	layer.open({
                type: 2,
                title: '添加角色',
                content:['/role/roleAdd'] ,//允许出现滚动条
                area:['40%', '50%']
            });      
	    break;
	  };
	});
	  //监听行工具事件
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    //console.log(data);
	    if(layEvent === 'del'){
	      layer.confirm('确定要删除此角色吗?', function(index){
	        layer.close(index);	        
	        $.ajax({
	    	    url : '/role/roleDel',
	    		type : "post",
	    		data : {id:data.id},
	    		dataType : "json",
	    		success : function(ret) {
	    			if (ret.state == 'ok') {
	    				layer.msg(ret.msg, {icon: 1, offset: '15px', time: 600}, function(){
	    					var index = parent.layer.getFrameIndex(window.name);
	    					parent.layer.close(index);
	    					$(".layui-laypage-btn").click();
	    				});
	    			} else {
	    				layer.msg('操作失败', {icon: 2, offset: '10px'});
	    			}
	    		},
	    		error: function() {
	          } 
	      });
	      });
	    } else if(layEvent === 'edit'){
	       mydata = {
				data:JSON.stringify(data)
			};
	    	layer.open({
                type: 2,
                title: '编辑角色',
                content:['/role/roleEdit'] ,
                area:['40%', '50%']
            });
	    }else if(layEvent === 'powerweb'){
		    	layer.open({
	                type: 2,
	                title: '后台授权',
	                content:['/role/powerWeb?id='+data.id] ,
	                area:['50%', '90%']
	            });
		}
	  });
});
function searchTable(){
	table.render({
	    elem: '#test'
	    ,url:'/role/paginate'
	    ,where: {roleName: $('input[name="roleName"]').val().trim()} 
		,toolbar: '#toolbarDemo'
	    ,title: '角色表'
	    ,cols: [[
	      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
	      ,{field:'name', title:'角色名称', width:200}
	      ,{field:'childIds', title:'子角色ID', width:200}
	      ,{field:'createAt', title:'创建时间', width:200,sort: true}
	      ,{field:'sortOrder', title:'角色排序', width:100}
	      ,{fixed: '', title:'操作', toolbar: '#barDemo', width:200}
	    ]]
	    ,page: true
	    ,request: {     
	        pageName: 'pageNumber'
	        ,limitName: 'pageSize'
	    }
	  });
}
</script>
</body>
</html>